<template>
  <div>
    <el-row>
      <el-col :span="5">
        <el-card>
          <div class="sp-content">
            <img src="../assets/imgs/sj.jpg" alt />
            <div>
              <div>【王芳专享】科大讯飞 智能学习机.</div>
              <div>价格：<font>￥3999</font></div>
              <div>佣金：<font>￥32</font></div>
            </div>
          </div>
          <div class="sp-details">
            <div>
              <span>来源：</span>
              <font>抖音小店</font>
            </div>
            <div>
              <span>分类：</span>
              <font>手机数码-手机</font>
            </div>
            <div>
              <span>品牌：</span>
              <font>华为</font>
            </div>
            <div>
              <span>店铺：</span>
              <font>百聪科技</font>
            </div>
          </div>

          <h3>数据概览</h3>
          <div class="sp-shop">
            <div>
              <p>25</p>
              <span>30天抖音浏览量</span>
            </div>
            <div>
              <p>4</p>
              <span>30天带货达人</span>
            </div>
            <div>
              <p>0</p>
              <span>30天抖音订单数</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19">
        <el-card style="padding: 0 10px 10px 10px">
          <!-- <h3>直播销量趋势图</h3> -->
          <div id="main"></div>

          <h3>主播列表</h3>
          <el-table
            :data="tableData"
            style="width: 100%"
            :default-sort="{ prop: 'age', order: 'descending' }"
          >
            <el-table-column prop="id" label="直播信息" align="center">
            </el-table-column>
            <el-table-column prop="age" label="主播信息" sortable align="center">
            </el-table-column>
            <el-table-column prop="name" label="直播优惠价" sortable align="center">
            </el-table-column>
            <el-table-column prop="address" label="直播销售量" align="center">
            </el-table-column>
            <el-table-column prop="address" label="直播销售额" align="center">
            </el-table-column>
            <el-table-column prop="address" label="观看人数" align="center">
            </el-table-column>
            <el-table-column prop="address" label="人数峰值" align="center">
            </el-table-column>
            <el-table-column label="图片">
                <template slot-scope="scope">
                <img :src="scope.row.ImageUrl" style="height: 50px"/>
                <span>这是图片</span>
                </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="12"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
            </el-pagination>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      option: {
        title: {
          text: "直播销量趋势图"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["直播销量"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "直播销量",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      },
      tableData:[
          {id:1,age:20,name:'jack',address:'江西',ImageUrl:'../assets/imgs/s1.jpg'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'},
          {id:1,age:20,name:'jack',address:'江西'}
      ]
    }
  },
  mounted(){
      var myEcharts=echarts.init(document.getElementById("main"))
      myEcharts.setOption(this.option)
  },
  methods:{
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  }
};
</script>
<style scoped>
.sp-content{
    height:90px;
    font-size: 12px;
    border-bottom:1px solid #ccc;
    padding-bottom:10px;
}
.sp-content img{
    float:left;
    width:90px;
    height:90px;

}
.sp-content>div{
    float:left;
    width:50%;
    margin-top: 10px;

}
.sp-content>div>div:first-child{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}
.sp-content>div>div:nth-child(2),.sp-content>div>div:nth-child(3){
    margin-top: 5px;
}
.sp-details{
    padding-bottom: 10px;
    border-bottom:1px solid #ccc;
}
.sp-details div{
    margin:10px 0;
}
.sp-details div span{
    color:#8e8e8e;
}
.sp-shop div{
    float:left;
    width:50%;
    margin:0 0 10px 0;
}
.sp-shop div p{
    text-align:center;
    font-size: 16px;
    font-weight: 700;
    margin:0;
}
.sp-shop div span{
    color:#8e8e8e;
    font-size: 14px;
}
#main {
  height: 300px;
}
.el-pagination{
    float:right;
    margin:20px 30px 0 0;
}
</style>
